<template>
	<div class="pt-20px">
		<div class="mb-20px">
			<p class=text-18px>产品列表</p>
			<div class="mt-20px mb-20px">
				<el-input v-model="inputValue" :prefix-icon="Search" style="width: 240px" placeholder="搜索" />
			</div>
			<div>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="coin" label="币种" >
						<template #default="scope">
							<div class="flex items-center pt-10px pb-10px">
								<img :src="scope.row.icon" alt="" class="w-20px h-20px mr-10px" />
								<span>{{ scope.row.coin }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="产品名称"/>
					<el-table-column prop="annualized" label="年化" />
					<el-table-column prop="min" label="最低起投" />
					<el-table-column prop="minTime" label="最低期限(天)" />
					<el-table-column  label="操作" align="right">
						<template #default="scope">
							<div>
								<el-button type="primary" color="#114CEE" @click="showRegularDeposit = true">
									立即申购
								</el-button>	
							</div>
						</template>
					</el-table-column>
				</el-table>
				<p class="w-100% flex justify-center text-16px mt-10px mb-10px cursor-pointer">查看更多</p>
			</div>
		</div>
		<div>
			<CommonProblem />
		</div>
	</div>
	<RegularDeposit :show="showRegularDeposit" @close="closeRegularDeposit"/>
</template>
<script setup lang="ts">
import RegularDeposit from '../components/RegularDeposit.vue';

import CommonProblem from '@/views/transaction/exchange/components/CommonProblem.vue';
import { Search } from '@element-plus/icons-vue';

const showRegularDeposit = ref<any>(false);
const closeRegularDeposit = (val:boolean) => {
	showRegularDeposit.value = val;
}
const inputValue = ref<string>('');

const tableData = ref<any[]>([
	{
		icon: '/home/btc.svg',
		coin: 'BTC',
		name: '理财T0',
		annualized: '4.5%~5.5%',
		min: '20 USDT',
		minTime: '7天'
	},
	{
		icon: '/home/btc.svg',
		coin: 'BTC',
		name: '双币投资',
		annualized: '4.5%~5.5%',
		min: '20 USDT',
		minTime: '7天'
	},
	{
		icon: '/home/btc.svg',
		coin: 'BTC',
		name: '链上赚币',
		annualized: '4.5%~5.5%',
		min: '20 USDT',
		minTime: '7天'
	}
])
</script>
<style lang="scss" scoped></style>
